<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
     minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/xiaomi10.css">

    <script>
        !(function (win, doc) {
            function setFontSize() {
                var winWidth = window.innerWidth;
                doc.documentElement.style.fontSize = (winWidth / 720) * 100 + 'px';
            }
            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            var timer = null;
            win.addEventListener(evt, function () {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
            win.addEventListener("pageshow", function (e) {
                if (e.persisted) {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }
            }, false);
            setFontSize();
        }(window, document));
    </script>
</head>

<body>
    <header>
        <img src="./images/10-h1.png" alt="">
        <div class="center">
            <a href="#">
                <span>商品</span>
            </a>
            <a href="#">
                <span>评价</span>
            </a>
            <a href="#">
                <span>详情</span>
            </a>
            <a href="#">
                <span>推荐</span>
            </a>
        </div>
        <img src="./images/10-h2.png" alt="">
    </header>
    <div class="banner">
        <div class="banner-center">
            <img src="./images/10-banner-1.jpg" alt="">
            <img src="./images/10-banner-2.jpg" alt="">
        </div>
        <div class="banner-dot">
            <div></div>
            <div></div>
        </div>
    </div>
    <!-- <section>
        <div class="section-box1">
            <span>￥3999 <span>￥4699</span></span>
            <div class="one">
                <span>
                    <span>预计得400米金</span>
                    <span>下单减600</span>
                </span>
                <span>领卷 ></span>
            </div>
            <h4>小米10系列</h4>
            <p>
                <div>1</div>
                <span>【旗舰屏幕】90Hz刷新率&amp;180Hz采样率，高端双曲面屏</span>
            </p>
            <p>
                <div>2</div>
                <span>【旗舰屏幕】90Hz刷新率&amp;180Hz采样率，高端双曲面屏</span>
            </p>
            <p>
                <div>3</div>
                <span>【旗舰屏幕】90Hz刷新率&amp;180Hz采样率，高端双曲面屏</span>
            </p>
            <div class="two">
                <div>
                    <img src="./images/10-s2.png" alt="">
                    <span>CPU</span>
                    <span>晓龙865</span>
                </div>
                <div>
                    <img src="./images/10-s1.png" alt="">
                    <span>四摄像头</span>
                    <span>10800万+景深...</span>
                </div>
                <div>
                    <img src="./images/10-s2.png" alt="">
                    <span>CPU</span>
                    <span>晓龙865</span>
                </div>
                <div>
                    <img src="./images/10-s1.png" alt="">
                    <span>四摄像头</span>
                    <span>10800万+景深...</span>
                </div>
                <div>
                    <img src="./images/10-s2.png" alt="">
                    <span>CPU</span>
                    <span>晓龙865</span>
                </div>
                <div>
                    <img src="./images/10-s1.png" alt="">
                    <span>四摄像头</span>
                    <span>10800万+景深...</span>
                </div>
                <div>
                    <img src="./images/10-s2.png" alt="">
                    <span>CPU</span>
                    <span>晓龙865</span>
                </div>
                <div>
                    <img src="./images/10-s1.png" alt="">
                    <span>四摄像头</span>
                    <span>10800万+景深...</span>
                </div>
                <div>
                    <img src="./images/10-s2.png" alt="">
                    <span>CPU</span>
                    <span>晓龙865</span>
                </div>
                <div>
                    <img src="./images/10-s1.png" alt="">
                    <span>四摄像头</span>
                    <span>10800万+景深...</span>
                </div>
            </div>
        </div>
    </section> -->
    <aside>
        <div class="up">
            <span>商品介绍</span>
            <span>规格参数</span>
        </div>
        <div class="bottom">
            <img src="./images/10a1.jpg" alt="">
            <img src="./images/10a2.jpg" alt="">
            <img src="./images/10a3.jpg" alt="">
            <img src="./images/10a4.jpg" alt="">
            <img src="./images/10a5.jpg" alt="">
            <img src="./images/10a6.jpg" alt="">
            <img src="./images/10a7.jpg" alt="">
            <img src="./images/10a8.jpg" alt="">
            <img src="./images/10a9.jpg" alt="">
            <img src="./images/10a10.jpg" alt="">
            <img src="./images/10a11.jpg" alt="">
            <img src="./images/10a12.jpg" alt="">
            <img src="./images/10a13.jpg" alt="">
            <img src="./images/10a14.jpg" alt="">
            <img src="./images/10a15.jpg" alt="">
            <img src="./images/10a16.jpg" alt="">
            <img src="./images/10a17.jpg" alt="">
            <img src="./images/10a18.jpg" alt="">
            <img src="./images/10a19.jpg" alt="">
            <img src="./images/10a20.jpg" alt="">
            <img src="./images/10a21.jpg" alt="">
            <img src="./images/10a22.jpg" alt="">
            <img src="./images/10a23.jpg" alt="">
            <img src="./images/10a24.jpg" alt="">
            <img src="./images/10a25.jpg" alt="">
            <img src="./images/10a26.jpg" alt="">
            <img src="./images/10a27.jpg" alt="">
            <img src="./images/10a28.jpg" alt="">
            <img src="./images/10a29.jpg" alt="">
            <img src="./images/10a30.jpg" alt="">
            <img src="./images/10a31.jpg" alt="">
            <img src="./images/10a32.jpg" alt="">
            <img src="./images/10a33.jpg" alt="">
            <img src="./images/10a34.jpg" alt="">
            <img src="./images/10a35.jpg" alt="">
            <img src="./images/10a36.jpg" alt="">
            <img src="./images/10a37.jpg" alt="">
            <img src="./images/10a38.jpg" alt="">
            <img src="./images/10a39.jpg" alt="">
            <img src="./images/10a40.jpg" alt="">
            <img src="./images/10a41.jpg" alt="">
            <img src="./images/10a42.jpg" alt="">
            <img src="./images/10a43.jpg" alt="">
            <img src="./images/10a44.jpg" alt="">
            <img src="./images/10a45.jpg" alt="">
            <img src="./images/10a46.jpg" alt="">
            <img src="./images/10a47.jpg" alt="">
            <img src="./images/10a48.jpg" alt="">
            <img src="./images/10a49.jpg" alt="">
            <img src="./images/10a50.png" alt="">
        </div>
    </aside>
    <div class="love">
        <div class="up">
            <span>猜你喜欢</span>
        </div>
        <div class="bottom">
            <div class="box">
                <img src="./images/gwc-b1.jpg" alt="">
                <span>米家石英表</span>
                <span>￥299<span>￥359</span></span>
            </div>
            <div class="box">
                <img src="./images/gwc-b2.jpg" alt="">
                <span>米家石英表</span>
                <span>￥299<span></span></span>
            </div>
            <div class="box">
                <img src="./images/gwc-b1.jpg" alt="">
                <span>米家石英表</span>
                <span>￥299<span>￥359</span></span>
            </div>
            <div class="box">
                <img src="./images/gwc-b2.jpg" alt="">
                <span>米家石英表</span>
                <span>￥299<span></span></span>
            </div>
        </div>
    </div>
    <footer>
        <div class="left">
            <a href="./index.html">
                <img src="./images/首页.png" alt="">
                <span>首页</span>
            </a>
            <a href="#">
                <img src="./images/首页.png" alt="">
                <span>客服</span>
            </a>
            <a href="./购物车.html">
                <img src="./images/购物车.png" alt="">
                <span>首页</span>
            </a>
        </div>
        <div class="right">
            <span>下载 App 设置到货通知</span>
        </div>
    </footer>
</body>

</html>